<template>

    <div style="margin: 30px 50px">
        <span id="contentMsg">{{objData.msg}}</span>
        <el-input v-model="objData.form.username" type="text" placeholder="账号" clearable>
            <template #prefix>
                <el-icon><User /></el-icon>
            </template>
        </el-input>
        <el-input v-model="objData.form.password" type="password" placeholder="密码" style="margin-top: 20px" show-password>
            <template #prefix>
                <el-icon><Lock /></el-icon>
            </template>
        </el-input>
        <el-row style="margin-top: 20px">
            <el-col :span="13">
                <el-input  type="text" v-model="objData.form.code" placeholder="验证码" style="width: 100%">
                    <template #prefix>
                        <el-icon><Message /></el-icon>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="10" :offset="1" id="img" @click="changeCode" style="cursor: pointer;">
            </el-col>
        </el-row>

        <div style="margin-bottom: 20px;margin-top: 20px">
            <el-button type="success" style="margin-right: 10px" @click="login">登录</el-button>
            <el-divider direction="vertical" />
            <el-button type="warning" style="margin-left: 10px" @click="router.push('/register')">注册</el-button>
        </div>
    </div>


</template>

<script lang="ts" setup>
    import {Lock, Message, User} from "@element-plus/icons-vue";
    import {reactive, ref} from "vue";
    import router from "@/router";
    import {post,get} from '@/assets/ts/ruquestMethod'
    import {ElMessage} from "element-plus";
    import axios from "axios";
    let objData = reactive({
            form: {
                username : '',
                password : '',
                code :''
                },
            msg : ''
    })

    const login = ()=> {
        if(!objData.form.username || !objData.form.password){
            ElMessage.warning('请输入账号密码')
        }else if(!objData.form.code){
            ElMessage.warning('验证码不能为空')
        } else {
                objData.msg = ''
                post(
                '/accounts/token',
                {
                    username : objData.form.username,
                    password : objData.form.password,
                    code : objData.form.code
                },
                (data:any) => {
                    if(data.status == 0){
                        ElMessage.warning(data.message)
                        objData.form.password = ''
                    }else if(data.status == 1){
                        ElMessage.success(data.message)
                        sessionStorage.setItem('loginName',objData.form.username)
                        router.push('/index')
                    }
                }
            )
        }
    }
    axios.get('/accounts/getcode',{
        responseType: 'blob',
        withCredentials : true
    }).then((response) => {
        console.log(response)
        const blob = new Blob([response.data], { type: response.data.type }); // 保存文件流为 Blob
        const imageUrl = URL.createObjectURL(blob); // 转换 Blob 为 URL
        // 显示图片
        const img = document.createElement('img');
        img.src = imageUrl;
        // document.body.appendChild(img);
        document.getElementById('img')?.appendChild(img)
    })
    const changeCode = () => {
        axios.get('/accounts/getcode',{
            responseType: 'blob',
            withCredentials : true
        }).then((response) => {
            console.log(response)
            let blob = new Blob([response.data], { type: response.data.type }); // 保存文件流为 Blob
            let imageUrl = URL.createObjectURL(blob); // 转换 Blob 为 URL
            // 显示图片
            let img = document.createElement('img');
            console.log(document.getElementById('img'))
            img.src = imageUrl;
            // document.body.appendChild(img);
            let img1 = document.querySelector('img')
            if(img1 != null)
                document.getElementById('img')?.removeChild(img1)
            document.getElementById('img')?.appendChild(img)
        })
    }


</script>

<style scoped>

</style>